<template>
<div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="top-area b-b-d">
          <div class="top-box-area flx-row-s-c c-d2">
            <div class="flx-col-s-c">
              <span class="f-w-600" style="font-size:24px;">100</span>
              <span class="f-16">可用积分</span>
            </div>
            <div class="flx-col-s-s" style="margin-left:80px;">
              <span class="f-16">积分规则</span>
              <p class="f-16" style="margin-top:14px">1.消费一元得一积分</p>
            </div>
          </div>
        </div>
        <div class="filter-line b-b-d flx-row-s-c">
          <span class="item-name">交易类型</span>
          <span
            v-for="(item, index) in dealType"
            :key="index"
            class="select-item"
            :class="[index == dealTypeSelect ? 'active' : 'normal']"
            style="margin-right: 40px"
            @click="dealTypeSelect = index"
          >
            {{ item.name }}
          </span>
        </div>
        <div class="filter-line b-b-d flx-row-s-c">
          <span class="item-name">登录时间</span>
          <DatePicker
              :editable="false"
            type="daterange"
            split-panels
            placeholder="请选择"
            style="width: 300px"
            @on-change="dateChange"
            :value="time"
          ></DatePicker>
          <div
            class="user-strong-button line-button-size"
            style="margin: 0 10px 0 30px"
            @click="pageChange(1)"
          >
            搜索
          </div>
          <div class="user-normal-button line-button-size" @click="reset">
            重置
          </div>
        </div>
        <div class="filter-line search-result-line flx-row-s-c">
          <span class="c-g f-14"
            >搜索结果<span class="c-o">{{
              total != null ? `(${total})` : ""
            }}</span></span
          >
        </div>
        <table class="table-area">
          <thead>
            <tr>
              <th><div class="line-style">发放时间</div></th>
              <th><div class="line-style">积分</div></th>
              <th><div class="line-style">备注</div></th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in list"
              :key="index"
              :class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']"
            >
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ (index + 1) * page }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.createdTime }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f"
                    >{{ item.ip }}（{{ item.address }})</span
                  >
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-e-c">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
</template>

<script>
import { getLoginLog } from "@/api/user"
export default {
  name: "VipSecurityLog",
  data() {
    return {
      loading: false,
      dealType: [
        {
          name: "全部",
          value: '',
        },
        {
          name: "收入",
          value: 0,
        },
        {
          name: "支出",
          value: 1,
        },
      ],
      // 表单数据
      dealTypeSelect: 0,
      time: [],
      startTime: "",
      endTime: "",

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    // 日期选择改变
    dateChange(date) {
      this.startTime = date[0];
      this.endTime = date[1];
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    // 重置
    reset() {
      this.time = [];
      this.startTime = "";
      this.endTime = "";
      this.page = 1;
      this.getList();
    },
    // 获取列表
    async getList() {
      this.loading = true;
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getLoginLog(params);
      if (res.code == 200) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.top-area {
  padding: 20px 34px;
}
.top-box-area {
  background-color: #F0F2F5;
  padding: 20px 80px;
}
</style>
